<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人物移动</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        #luoli{
            position: absolute;
            top: 80px;
            left: 200px;
            width: 195px;
            height: 584px;
            transition: 2s;
        }
        .up{
            background: url("../../img/网页角色图/up.png") no-repeat;
        }
        .down{
            background: url("../../img/网页角色图/down.png") no-repeat;
        }
        .left{
            background: url("../../img/网页角色图/left.png") no-repeat;
        }
        .right{
            background: url("../../img/网页角色图/right.png") no-repeat;
        }  
    </style>
</head>
<body>
    <div id="luoli" class="down">

    </div>
    <script>
        let domLuoli = document.querySelector('#luoli'),
            distance = 60;
        document.onkeydown = function(e){
            switch(e.which){
                case 37://左
                    domLuoli.style.left = domLuoli.offsetLeft - distance + "px"
                    domLuoli.className = "left"
                    break;
                case 38://上
                    domLuoli.style.top = domLuoli.offsetTop - distance + "px"
                    domLuoli.className = "up"
                    break;
                case 39://右
                    domLuoli.style.left = domLuoli.offsetLeft + distance + "px"
                    domLuoli.className = "right"
                    break;
                case 40://下
                    domLuoli.style.top = domLuoli.offsetTop + distance + "px"
                    domLuoli.className = "down"
                    break;
            }
        }
        /*
            1.doucument中添加键盘按下事件
            2.识别出上下左右的方向键，判断人物移动的方向
            3.每按一次方向键，人物向对应方向移动4px,切换对应方向的人物图片
        */
    </script>
</body>
</html>